<template>
  <div  class="app-container"  v-loading="loading">
    <div style="font-size: 14px;color: #9d9d9d;margin-left: 30px">
      功能描述：账号模版发布需要先配置账号模板(只支持视频号发布)
    </div>

<!--    <div style="font-size: 20px;color: #868686;margin-top: 20px;margin-left: 40px">该页面功能未完善，目前测试中，页面内容仅供参考。</div>-->

    <div style="margin-top: 30px;">
      <el-form ref="form" :model="form" :rules="rules" label-width="150px">

        <!--        标签样式-->
        <div style="display: flex;margin-bottom: 30px;margin-top: 20px">
          <div style="width: 5px;height: 15px;background: #7983f3;border-radius: 5px;margin-top: 4px"></div>
          <div style="margin-left: 10px;color: #797979"><b>选择账号</b></div>
        </div>



        <el-row :gutter="24">
          <el-col :span="24">
            <el-form-item label="选择账号" prop="accountId">

                <el-button v-if="!currentRow.id"   @click="selectAccount">
                  选择账号
                </el-button>
                <div style="margin-top: 30px"></div>
                <div class="itemdiv" style="display: flex;justify-content: flex-start;flex-wrap: wrap;align-content: center">

                  <div v-for="(item,index) in currentRow" :key="index" style="margin: 5px;margin-bottom: 10px;margin-right: 8px;line-height: 20px;padding: 3px 6px;cursor: pointer;text-align: center">
                    <div>
                    <img style="height: 26px;width: 26px;border-radius: 50px;" :src="item.headImgUrl" />
                  </div>
                    <div>
                      <div style="margin-top: 7px">{{item.nickname.length > 7 ? item.nickname.substr(0,7) + "..." : item.nickname}}</div>
<!--                      <div :style="item.fileCount > 3 ? 'color:#ffffff' : 'color:#000000'">(剩余{{item.fileCount}}个视频)</div>-->
                    </div>
<!--                    <div style="display: flex;position:relative;margin-top: 20px">-->
<!--                      <div style="margin-top: 7px"><el-tag>{{item.nickname.length > 7 ? item.nickname.substr(0,7) + "..." : item.nickname}}</el-tag></div>-->
<!--                      <img style="height: 50px;width: 50px;border-radius: 50px;margin-left: 100px;position:absolute" :src="item.headImgUrl"/>-->
<!--                    </div>-->
                  </div>
                </div>
            </el-form-item>
          </el-col>
        </el-row>


      <!--        标签样式-->
      <div style="display: flex;margin-bottom: 30px;margin-top: 20px">
        <div style="width: 5px;height: 15px;background: #7983f3;border-radius: 5px;margin-top: 4px"></div>
        <div style="margin-left: 10px;color: #797979"><b>发布配置</b></div>
      </div>


<!--              视频描述   -->
      <el-row :gutter="24">
        <el-col :span="12">
          <el-form-item label="视频描述" prop="description">
            <el-input type="textarea" disabled v-model="form.description" :rows="3" placeholder="请输入视频描述"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

<!--              视频扩展链接  -->
      <el-row :gutter="24">
        <el-col :span="12">
          <el-form-item label="扩展链接" prop="link">
            <el-input v-model="form.link" disabled clearable  placeholder="将公众号文章链接或红包封面链接粘贴在此处"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

<!--              短标题  -->
      <el-row :gutter="24">
        <el-col :span="12">
          <el-form-item label="短标题" prop="link">
            <el-input v-model="form.shortTitle" disabled clearable  placeholder="概括视频主要内容，字数建议6-16个字符"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

<!--              发布类型  -->
      <el-row :gutter="24">
        <el-col :span="24">
          <el-form-item label="是否间隔发布">
            <el-radio-group disabled v-model="form.publishType">
              <el-radio label="1">间隔时间</el-radio>
<!--              <el-radio label="2">定时发布</el-radio>-->
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>


        <div style="position:absolute;bottom: 10%;right: 30%;">
            <el-button type="primary"   @click="submitForm">提交发布</el-button>
        </div>
      </el-form>
    </div>

    <el-dialog title="选择发布账号" :visible.sync="checkAccountVisable"  width="1100px" append-to-body>
      <div style="display: flex;">
        <div  style="width: 300px;display: flex;flex-direction: column">
          <group-select @getGroupData="getGroupData" @reloadData="resetQuery"></group-select>
        </div>
        <div style="width: 88vw;">
          <el-form :model="queryParams"  ref="queryForm" size="small" :inline="true"  label-width="68px">
            <el-form-item label="账号昵称" prop="nickname">
              <el-input
                v-model="queryParams.nickname"
                placeholder="请输入账号昵称"
                clearable
                @keyup.enter.native="getList"
              />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" size="mini" @click="getList">搜索</el-button>
              <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
          </el-form>

          <el-table v-loading="loading" bordered :data="accountList"  height="65vh"  highlight-current-row  @selection-change="handleSelectionChange"  >
            <el-table-column type="selection" width="55" align="center"  />
            <!--          改变行样式   :row-class-name="rowStyle"-->
            <el-table-column label="账号头像" align="center" prop="headImgUrl" >
              <template slot-scope="scope">
                <img :src="scope.row.headImgUrl" style="width: 50px;height: 50px;border-radius: 50px">
              </template>
            </el-table-column>
            <el-table-column label="账号昵称" align="center" prop="nickname" >
              <template slot-scope="scope">
                <span style="font-size: 13px;color: #646464;">{{scope.row.nickname}}</span>
              </template>
            </el-table-column>
            <el-table-column label="平台" align="center" prop="platform" >
              <template slot-scope="scope">
                <img :src="require('@/assets/media/' + scope.row.platformCode + '.png' )" style="width: 30px;height: 30px;border-radius: 50px">
              </template>
            </el-table-column>
            <el-table-column label="是否文件名作为标题" align="center" prop="headImgUrl" >
              <template slot-scope="scope">
                <div >
                  <el-tag v-if="scope.row.mediaPublishModelConfig && scope.row.mediaPublishModelConfig.isFileTitle === 1" type="success">是</el-tag>
                  <el-tag v-if="scope.row.mediaPublishModelConfig && scope.row.mediaPublishModelConfig.isFileTitle === 0" type="info">否</el-tag>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="模板发布路径" align="center" prop="headImgUrl" >
              <template slot-scope="scope">
                <div v-if="scope.row.mediaPublishModelConfig">
                  {{ scope.row.mediaPublishModelConfig.filePath}}
                </div>
              </template>
            </el-table-column>
            <el-table-column label="账号登录状态" align="center" prop="loginStatus" >
              <template slot-scope="scope">
                <el-tag :type="scope.row.loginStatus === 1 ? '' : 'danger'"
                        style="cursor:pointer" >
                  {{scope.row.loginStatus === 1 ? '已登录' : '已掉线'}}
                </el-tag>
              </template>
            </el-table-column>
          </el-table>
          <pagination
            v-show="total>0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
          />
        </div>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button :loading="buttonLoading" type="primary" @click="checkAccountData">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { listMediaAccount, getAccount, delAccount, addAccount, updateAccount } from "@/api/media/mediaAccount";
import groupSelect from '@/views/media/accountGroup/groupSelect/index'
import { publishVideo } from "@/api/media/channelsPublish";
import {Message} from "element-ui";
import { listPublishRecord, addPublishRecord} from "@/api/media/publishRecord";
import store from "@/store";
import { listAccountGroup } from "@/api/media/accountGroup";
export default {
  name: "videoPublish",
  components:{
    groupSelect
  },
  data() {
    return {
      buttonLoading:false,
      checkAccountVisable:false,
      percent: 50, // the percentage of the progress bar
      color: '#409EFF', // the color of the progress bar
      strokeWidth: 15, // the width of the progress bar stroke
      loading:false,
      total:0,
      accUser:[],
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      activeName:'one',
      checkAll: false,
      currentRow:{
      },
      groupDataList:{},
      form:{
        link:undefined,
        publishType:'1',
        description:undefined,
        accountId:undefined,
        publishTime:undefined,
        filePath: undefined,
        shortTitle:undefined,
        mode:'0'
      },
      dialogVisible:false,
      publishTime:'',
      rules:{
        accountId: [
          { required: true, message: "账号不能为空", trigger: "blur" }
        ],
        filePath:[
          { required: true, message: "视频文件不能为空", trigger: "blur" }
        ],
        publishTime:[
        { required: true, message: "发布时间不能为空", trigger: "blur" }
        ]
      },
      queryParams:{
        pageNum: 1,
        pageSize: 10,
        platformCode:'wxsph',
        isConfigModel:1,
        groupId:undefined
      },
      dir_path:'',
      isIndeterminate: true,
      accountList:[]
    };
  },
  created() {
    this.getList();
    this.getGroupList();
  },
  methods: {

    /**
     * 选择账号时弹框选择对应账号
     */
    selectAccount(){
      this.checkAccountVisable = true;
    },

    /** 查询账号管理列表 */
    getList() {
      this.loading = true;
      listMediaAccount(this.queryParams).then(response => {
        console.log(response)
        this.accountList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },

    getGroupList(){
      listAccountGroup(this.queryParams).then((res)=>{
        if(res.code === 200){
          this.groupDataList = res.rows
        }
      })
    },

    /**
     * 重置按钮
     */
    resetQuery(){
      this.queryParams = {
        platformCode:'wxsph',
        pageNum:1,
        pageSize:10
      }
        this.getList()
    },

    /**
     * 选中账号信息
     */
    checkAccountData(){
      for(var i = 0 ; i < this.currentRow.length;i++){
        if(!this.currentRow[i].mediaPublishModelConfig || !this.currentRow[i].mediaPublishModelConfig.filePath){
          Message.error("当前选中账号包含未配置模板的账号，请重新选择！")
          return;
        }
        if(this.currentRow[i].loginStatus === 0){
          Message.error("当前选中账号包含未登录的账号，请重新选择！")
          return;
        }
      }
      console.log(this.currentRow)
      this.checkAccountVisable = false;
    },

    /**
     * 关闭表格弹框
     */
    cancel(){
      this.checkAccountVisable =  false
    },


    /**
     * 选择是否原创发布
     */
    showOriginalityDialog(){
        this.$confirm('原创内容将受平台保护，盗用原创内容将受到平台处罚。', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.form.mode = '1';
        }).catch(() => {
          this.form.mode = '0';
        });
    },


    // 多选框选中数据
    handleSelectionChange(val) {
      this.currentRow = val;
      let that = this
      // val.forEach(async (item)=>{
      //   console.log(item)
      //  let res =  await this.serviceInvoke("controller.system.selectFormVideoNumber",{filePath:item.mediaPublishModelConfig.filePath})
      //   that.currentRow.fileCount = res
      // })
      // this.checkAccountVisable = false;
    },


    /**
     * 选择文件夹
     */
    async selectDir(num) {
      const self = this;
      if(num === 1){
        const result =  await  this.serviceInvoke("controller.example.selectFolder",2) //文件上传
        this.form.filePath = result.path
      }else{
        const result =  await  this.serviceInvoke("controller.example.selectFolder",1)  //文件夹上传
        this.form.filePath = result.path
      }
    },

    // 表单重置
    reset() {
      this.form = {
        link:undefined,
        publishType:'1',
        description:undefined,
        accountId:undefined,
        publishTime:undefined,
        filePath: undefined,
        shortTitle:undefined,
        mode:'0'
      };
    },

    /**
     * 改变行样式
     * @param row
     * @param rowIndex
     */
    rowStyle({row, rowIndex}){
      if(this.currentRow.id === row.id){
        return 'checked'
      }else{
        return 'noChecked'
      }
    },


    /**
     * 获取分组数据
     * @param item
     */
    getGroupData(item){
      console.log(item)
      this.queryParams.groupId = item.id
      this.getList()
    },

    /**
     * 发布视频
     */
   async  submitForm(){
     let that =this;
      if(!this.currentRow.length){
        Message.error("请选择账号！")
        return;
      }
        console.log(this.currentRow)
      let arg = {
        mediaPublishRecordBos:this.currentRow
      }
      await  addPublishRecord(arg).then(async (res)=>{})
      // setTimeout(()=>{
      //   that.serviceInvoke("controller.media.channels",{username:store.getters.name})
      // },3000)
        //重置参数
       this.reset();
       Message.success("发布任务已提交，请在发布记录中查看！")
  },


  }
};
</script>
<style lang="scss" scoped>

::-webkit-scrollbar {
  width: 4px;
  height: 10px;
  border-radius: 4px;
  background-color: #F5F5F5;
}
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
  border-radius: 10px;
  background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0.44, rgb(175, 140, 168)),color-stop(0.72, rgb(163, 178, 189)),color-stop(0.86, rgb(147, 137, 125)));
  transition: 0.3s ease-in-out;
}
::-webkit-scrollbar-track {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
  background-color: #F5F5F5;
}
.el-table .checked {
  background: #051226 !important;
  cursor: pointer;
  transition: all .3s;
}

.el-table .noChecked {
  cursor: pointer;
  background: #fcfcfc !important;
}
</style>
